<template>
  <el-card class="container">
    <div class="title"></div>
    <div ref="target" class="box"></div>
  </el-card>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

// 渲染图表

/**
 * 初始化 echarts
 */
const target = ref(null)
let mChart = null
onMounted(() => {
  mChart = echarts.init(target.value)
  renderBMap()
})

/**
 * 渲染地图数据
 */
const renderBMap = () => {
  const options = {
    title: {
      text: '数据上报情况统计',
      left: 'left'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'right'
    },
    series: [
      {
        name: '',
        type: 'pie',
        radius: '50%',
        data: [
          { value: 60, name: '已上报' },
          { value: 30, name: '未上报' },
          { value: 10, name: '上报超时' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  mChart.setOption(options)
}
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  .title {
    position: absolute;
    top: 38px;
    margin-left: 50%;
    transform: translate(-50%,-50%);
    color: #333;
    font-weight: normal;
    z-index: 9;
  }
  .box {
    height: 462px;
  }
}
</style>
